@carousel-prefix: ~"@{prefix}carousel";

.@{carousel-prefix} {
  position: relative;
  & &-container{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  & &-list {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
    .@{carousel-prefix}-item {
      background-position: center;
      background-repeat: no-repeat;
      flex-shrink: 0;
      width: 100%;
      height: 100%;
      position: relative;
      position: relative;
      .@{carousel-prefix}-bg {
        height: 100%;
        background-position: center;
        background-size: cover;
      }
      .@{carousel-prefix}-bg-pointer {
        cursor: pointer;
      }
      &.@{carousel-prefix}-effect-item{
        position: absolute;
      }
    }
  }
  .@{carousel-prefix}-arrow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: .3s;
    .h-icon-left,
    .h-icon-right {
      z-index: 2;
      color: #fff;
      font-size: 32px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      opacity: 0.4;
      transition: .5s;
      &:hover {
        opacity: 1;
      }
    }
    .h-icon-left {
      left: 2%;
    }
    .h-icon-right {
      right: 2%;
    }
    &.@{carousel-prefix}-arrow-hover {
      opacity: 0;
    }
  }
  &:hover &-arrow-hover{
    opacity: 1;
  }
  .@{carousel-prefix}-arrow-hidden {
    display: none !important;
  }
}

.@{carousel-prefix}-pagination {
  z-index: 3;
  position: relative;

  &-circle &-item,&-square &-item {
    opacity: 0.4;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    height: 15px;
    transition: .5s;
    >span {
      display: inline-block;
      border-radius: 4px;
      background-color: #fff;
    }
    &.active {
      opacity: 1;
    }
    &:last-of-type{
      margin-right: 0;
    }
  }

  &-circle,&-square {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }
  &-circle &-item>span{
    width: 8px;
    height: 8px;
  }
  &-square &-item>span{
    width: 25px;
    height: 3px;
  }
  &-hidden {
    display: none;
  }
}

.h-carousel-effect-fade-enter-active, .h-carousel-effect-fade-leave-active {
  transition: opacity 1s;
}
.h-carousel-effect-fade-enter, .h-carousel-effect-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
